import React, {useContext, useEffect} from "react";
import {DataList, LinkButton, Panel} from "rc-easyui";
import {DatasetImageContext} from "../context";
import {resourceAccessItems, resourceRemoveEvent, resourceService, useTable,} from "@kordar/easyui-tpl";
import {Access, useRefDialog} from "@kordar/easyui";
import {CheckAccessEleType, FormDataType} from "@kordar-lib/base";
import {FormDialog} from "./dialog";
import {tparam} from "@kordar-lib/i18n";

let name = "dataset-label"
let accessItems = [
    { type: CheckAccessEleType.AND, value: ["/resource/dataset-label/list"], key: name },
    ...resourceAccessItems(name)
]


const LabelPanel = () => {

    const {pageConfig, fetchConfig, ctx, ctxState, dataset} = useContext(DatasetImageContext)

    const tb = useTable({
        name: name,
        fetch: (request) => resourceService.list(name, request),
        checkAccessItems: accessItems,
        defaultPageSize: 30
    })

    tb.ctx.registerEvent("remove", resourceRemoveEvent(tb.ctx))

    let formdlg = useRefDialog()

    useEffect(() => {
        tb.ctx.search()
    }, [tb.version])

    const footer = () => {

        let openParam = {
            record: {name: '', remark: '', dataset_id: dataset.id},
            type: FormDataType.CREATE,
            ctx: tb.ctx,
            title: tparam(pageConfig, 'create_label.text', 'Create Label')
        }

        return (
            <div style={{ padding: 5 }}>
                <Access ctx={ctx} point="add">
                    <LinkButton plain onClick={() => formdlg.open(openParam)}
                                iconCls="icon-add color-dark-green">
                        {tparam(pageConfig, "create_label.text", "Create Label")}
                    </LinkButton>
                </Access>
            </div>
        )
    }

    const update = (row) => {
        let openParam = {
            record: row,
            type: FormDataType.UPDATE,
            ctx: tb.ctx,
            title: tparam(pageConfig, 'update.text', 'Update Label')
        }

        formdlg.open(openParam)
    }

    const renderItem = ({row}) => {
        return (
            <div className="dataset-label-card">
                <div className="thumb">
                    <img src={row.thumb} alt="No Image" />
                </div>
                <div className="info">
                    <div className="tags">
                        <div className="tag">{tparam(pageConfig, "label_count.text", "Labels")}: {row.label_total}</div>
                        <div className="tag">{tparam(pageConfig, "img_count.text", "Images")}: {row.img_count}</div>
                    </div>
                    <div className="name">{row.name}</div>
                    <div className="remark">{row.remark}</div>
                    <div className="actions">
                        <LinkButton>
                            <div style={{backgroundColor: row.color, width: 20, height: 20, borderRadius: 5, border: '1px solid black'}}/>
                        </LinkButton>


                        <Access ctx={ctx} point="update">
                        <LinkButton onClick={() => update(row)}
                                        iconCls="iconfont icon-edit color-dark-green"/>
                        </Access>

                        <Access ctx={ctx} point="delete">
                            <LinkButton onClick={() => tb.ctx?.publish('remove', {conditions: [{key: "id", value: row.id}]})}
                                        iconCls="iconfont icon-del color-red"/>
                        </Access>
                    </div>
                </div>
            </div>
        )
    }

    return (<>
        <Panel title={dataset.name}
               bodyStyle={{padding: 5}}
               footer={footer}
               style={{height: "100%"}}>

            <FormDialog {...formdlg} />
            <DataList
                style={{width: '100%', height: '100%'}}
                renderItem={renderItem}
                data={tb.ctxState.data||[]}
                border={false}
                selectionMode="single"
            />
        </Panel>
    </>)
}

export default LabelPanel
